<template>
	<view class="body" :style="[theme]">
		<view class="home-container">
			<template v-if="showSidebar">
				<z-sidebar :titleList="chatList" :curSelectIndex="curSelectIndex" @selectTitle="selectTitle"
				           @addTopic="addTopic" @deleteTitle="deleteTitle"/>
			</template>
			<template v-else>
				<u-popup :show="showSidebarPopup" mode="left" @close="clickSidebarPopup(2)">
					<z-sidebar :titleList="chatList" :curSelectIndex="curSelectIndex" :showSidebar="showSidebar"
					           @clickSidebarPopup="clickSidebarPopup" @addTopic="addTopic"
					           @selectTitle="selectTitle" @deleteTitle="deleteTitle"/>
				</u-popup>
			</template>
			<z-window-content ref="windowContent" id="content" :componentKey="componentKey" :fullScreen="fullScreen"
			                  :chatBodyList="chatList" :curSelectIndex="curSelectIndex"
			                  :showSideBarButton="showSidebar" @editTitle="editTitle" @clickFullScreen="clickFullScreen"
			                  @clickSidebarPopup="clickSidebarPopup" @sendMessage="sendMessage"/>
		</view>
		<view>
			<u-modal :show="showTips" :title="tipsTitle" :content="tipsContent" :closeOnClickOverlay="true"
			         @confirm="confirmTips" @close="confirmTips"/>
		</view>
	</view>
</template>

<script>
import Theme from "@/components/chat/js/theme";

export default {
	data() {
		return {
			fullScreen: false,
			showSidebar: true,
			showSidebarPopup: false,
			theme: Theme.theme,
			curSelectIndex: 0,
			chatList: [],
			componentKey: 0,
			showTips: false,
			tipsTitle: "FanStars温馨提示",
			tipsContent: "",
		}
	},
	onLoad() {
		this.chatList = this.vuex_chatList;
		uni.$u.chat.globalConfig = this.vuex_globalConfig && Object.keys(this.vuex_globalConfig).length > 0
				? this.vuex_globalConfig : uni.$u.chat.globalConfig;
		// 支持 app h5 微信、飞书、qq小程序
		uni.onWindowResize((res) => {
			this.initWindow(res.size.windowWidth);
		});

		// 获取系统信息
		let systemInfo = uni.getSystemInfoSync()
		this.initWindow(systemInfo.windowWidth);

		// 当标题主题为空时，新增一个主题
		if (this.chatList.length === 0) {
			this.addTopic();
		}
	},
	onShow() {
	},
	async mounted() {
		// #ifdef H5
		this.$refs.windowContent.keyListener();
		// #endif
	},
	methods: {
		initWindow(width, height) {
			if (width < 800) {
				this.clickFullScreen(1);
				this.showSidebar = false;
				this.theme['--window-content-width'] = "100%";
				this.theme['--container-min-width'] = "unset";
			} else {
				this.clickFullScreen(2);
				this.theme['--window-content-width'] = "calc(100% - var(--sidebar-width))";
				this.showSidebar = true;
			}
		},
		selectTitle(index) {
			this.curSelectIndex = index;
			this.componentKey++; // 重新渲染插件
		},
		editTitle(newTitle) {
			this.chatList[this.curSelectIndex].topic = newTitle;
			this.updateVuexChatList();
		},
		deleteTitle(index) {
			this.updateVuexChatList();
		},
		clickFullScreen(type) {
			if (type === 1) {
				this.fullScreen = true;
				for (let fullScreenThemeKey in Theme.fullScreenTheme) {
					this.theme[fullScreenThemeKey] = Theme.fullScreenTheme[fullScreenThemeKey];
				}
			} else if (type === 2) {
				this.fullScreen = false;
				for (let noFullScreenThemeKey in Theme.noFullScreenTheme) {
					this.theme[noFullScreenThemeKey] = Theme.noFullScreenTheme[noFullScreenThemeKey];
				}
			}
		},
		clickSidebarPopup(type) {
			if (type === 1) {
				this.showSidebarPopup = true;
			} else if (type === 2) {
				this.showSidebarPopup = false;
			}
		},
		showModelTips(tipsContent = "温馨提示", tipsTitle) {
			this.showTips = true;
			this.tipsContent = tipsContent;
			if (tipsTitle) {
				this.tipsTitle = tipsTitle;
			}
		},
		confirmTips() {
			this.showTips = false;
		},
		delayedScrollToBottom(type = 1, timeout = 10) {
			setTimeout(() => {
				this.scrollToBottom(type);
			}, timeout);
		},
		scrollToBottom(type = 1) {
			this.$nextTick(() => {
				this.$refs.windowContent.scrollToBottom(type);
			});
		},
		sendMessage(message) {
			if (!message || !message.trim()) {
				this.showModelTips("请输入内容");
				return;
			}
			this.$refs.windowContent.clearInputText();
			uni.$u.http.api.sendMessage(message, {
				chat: this.chatList[this.curSelectIndex],
				scrollToBottom: this.scrollToBottom,
				delayedScrollToBottom: this.delayedScrollToBottom,
				updateVuexChatList: this.updateVuexChatList,
			});
		},
		updateVuexChatList() {
			this.$u.vuex('vuex_chatList', this.chatList);
		},
		addTopic() {
			this.chatList.splice(0, 0, uni.$u.chat.newChatDefault());
			this.curSelectIndex = 0;
			this.componentKey++;
			this.updateVuexChatList();
		}
	}
}
</script>

<style lang="scss">
@import '@/static/css/index.scss';

.body {
	background-color: $gray;
	color: $black;
	margin: 0;
	padding: 0;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	font-family: 'Noto Sans SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	height: $full-height;
}

.home-container {
	border: $border-in-light;
	border-radius: $container-border-radius;
	box-shadow: $shadow;
	color: $black;
	background-color: $white;
	min-width: $container-min-width;
	min-height: 490px;
	max-width: $container-max-width;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	width: $window-width;
	height: $window-height;
}
</style>